<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>

  <script src="../packages/reactivity/dist/reactivity.global.js"></script>

  <script>
    const { reactive, shallowReactive, effect, ref } = VueReactivity;

    const obj = reactive({
      name: 'John',
      age: '12',
      address: 'xxx'
    })

    const obj1 = ref('xxxxx')

    effect(() => {
      console.log('effect run', obj);
      app.innerHTML = `${obj1.value}, ${obj.age}`
    }, {})

    setTimeout(() => {
      // obj.name = 'frontend';
      // obj.age = '31';

      obj1.value = 'hello world';
    }, 1000);


    // 1. effect 中的所有的属性 都会收集 effect   => track
    // 2. 只要属性发生变化，会重新执行 effect      => trigger

  </script>
</body>
</html>